<template>
    <div class="aaa">
        <div class="tishi">
            ---以下是帮您搜索到的关于 {{content}} 的饮食内容---
        </div>
        <!--                  内容-->
        <div class="xunhuanaaa" v-for="(p,index) in yinshilist" :key="index">
            <!--            帖子标题-->
            <!--                一条帖子的框框，从这里开始v-for遍历-->
            <div class="dudeneirong" >
                <div v-html="p.introduce"/>
            </div>

        </div>
        <el-row style="font-size: 30px ;margin-top: 100px">
            <!--     分页     -->
            <el-pagination
                    v-show="total>0"
                    :page-size="pageSize"
                    :pager-count="11"
                    :current-page.sync="pageNum"
                    :total="total"
                    @current-change="getList"
            >
            </el-pagination>

        </el-row>
    </div>
</template>

<script>
    export default {
        name: "sousuoyinshi",
        data(){
            return {
                yinshilist:[],
                pageSize: 10,
                pageNum: 1,
                total: 0,
            }
        },
        methods:{
            // 查看饮食
            async getList(){
                // this.loading = true;
                // const token = sessionStorage.getItem("token");
                // this.$http.defaults.headers.common['Authorization'] = token;
                // this.$http.get("food/list?content="+this.content  + '&' + "pageNum="+this.pageNum ).then(response => {
                //     console.log(this.content);
                //     this.yinshilist = response.data.data.data;
                //     console.log(this.yinshilist);
                //     this.loading = false;
                //     this.total = response.data.data.total;
                // });
                const {data: jieguo} = await this.$http.get("/food/list?content=" + this.content + '&' + "pageNum="+this.pageNum)
                this.yinshilist = jieguo.data.data;
                this.total = jieguo.data.total;

            },
        },
        props: {
            "content": {
                required: true,
                default: () => ""
            },
        },
        watch: {
            "content": {
                handler(newValue) {
                    if (newValue === "") {
                        this.yinshilist = []
                        this.total = 0
                        return
                    }
                    this.content = newValue;
                    this.getList();
                },
                deep: true
            }


        },
    }

</script>

<style scoped>
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        min-height: 850px;
        height: auto!important;
        width: 100%;

    }
    .yierhang{
        width: 800px;
        height: 100px;
        text-align: center;
        margin-left: 200px;
        margin-top: 20px;
        background: #FFFFE0;
        border: #FFFACD solid 2px;
    }
    .xunhuanaaa{
        min-height: 50px;
        height: auto!important;
        width: 100%;
        margin-bottom:25px;
    }
    .dudeneirong{
        border: #FFFACD solid 2px;
        background: #FFFFE0;
        margin-top: 20px;
        margin-left: 12%;
        width: 76%;
        color: #111111;
        min-height: 80px;
        height: auto!important;
    }
    .tishi{
        width: 100%;
        height: 50px;
        color: #888888;
        font-size: 30px;
        text-align: center;
    }
</style>
